<template>
  <div class="userinfo-container nav-bar-top">
    <!-- 导航栏 -->
    <van-nav-bar class="nav-bar" title="个人信息" left-arrow @click-left="$router.back()"/>
    <van-cell-group :border="false" class="circle-bg pl0 pr0">
      <van-cell class="head-cell" title="头像" is-link>
        <div slot="default" class="head-box">
          <van-uploader :after-read="changeAvatar" name="file">
            <div class="upload-btn" v-if="!user || !user.headUrl">点击添加头像</div>
            <van-image width="32" height="32" round :src="user.headUrl" v-if="user && user.headUrl"/>
          </van-uploader>
        </div>
      </van-cell>
      <van-cell @click="() => {editShow = true;this.nickname = this.user.nickname}" title="昵称" is-link :value="user.nickname" />
      <van-cell class="no-border" title="手机号" value="13000000000" />
      <van-dialog v-model="editShow" title="修改昵称" show-cancel-button @confirm="changeName">
        <van-field
          input-align="center"
          v-model="nickname"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
      </van-dialog>
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import constants from '@/config/constants'
import sysApi from '@/api/sysApi'
import userApi from '@/api/userApi'

export default {
  name: 'userinfo',
  data () {
    return {
      editShow: false,
      nickname: ''
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    /* 更换头像 */
    async changeAvatar (file) {
      //上传图片
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
  　　formData.append('file', file.file); //接口需要传的参数
      const fileInfo = await sysApi.upload(formData);
      if(fileInfo){
        //更新头像
        const result = await userApi.updateMemberInfo({
          id: this.user.id,
          nickname: '',
          headUrl: fileInfo.url
        })
        if(result.code == constants.SUCCESS){
          //更新用户信息
          this.$store.commit(constants.STORE.UPDATE_USER);
        }
      }
    },
    /* 更换昵称 */
    async changeName () {
      if(this.nickname){
        //更换昵称
        const result = await userApi.updateMemberInfo({
          id: this.user.id,
          nickname: this.nickname,
          headUrl: ''
        })
        if(result.code == constants.SUCCESS){
          //更新用户信息
          this.$store.commit(constants.STORE.UPDATE_USER);
        }
      }else{
        this.$toast.fail('请填写昵称');
      }
    }
  }
}
</script>

<style lang="scss">
.userinfo-container{
  padding-top: 5px;
  /deep/ .van-cell{
    padding: 15px;
  }
  /deep/ .van-cell.no-border::after{
    border-bottom: none;
  }
  /deep/ .van-dialog__content{
    .van-cell{
      padding: 20px 15px;
    }
  }
  /deep/ .head-cell{
    display: file;
    align-items: center;
    .head-box{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      /deep/ .van-uploader__input-wrapper{
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
